<template>
    <div>
        <el-collapse-item :title="`- ${pageTitle}`" :name="props.id">
            <!-- 立体 -->
            <ul class="editorformTable" v-if="plottingType == 'box'">
                <li class="editorformItem">
                    <div class="editorformItemName">长度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.dimensions_x"
                            @input="change('dimensions_x', style.dimensions_x)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="1"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">宽度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.dimensions_y"
                            @input="change('dimensions_y', style.dimensions_y)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="1"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">高度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.dimensions_z"
                            @input="change('dimensions_z', style.dimensions_z)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="1"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">方向角</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.heading"
                            @input="change('heading', style.heading)"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">仰俯角</div>
                    <div class="editorformItemFunc">
                        <el-slider v-model="style.pitch" @input="change('pitch', style.pitch)" :min="0" :max="360" :step="1" class="editorformItemslider" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">翻滚角</div>
                    <div class="editorformItemFunc">
                        <el-slider v-model="style.roll" @input="change('roll', style.roll)" :min="0" :max="360" :step="1" class="editorformItemslider" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否填充</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.fill" @change="change('fill', style.fill)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <fillmaterial :graphic="layer" type="5"></fillmaterial>
                <border :graphic="props.graphic"></border>
            </ul>
            <!-- 圆柱 -->
            <ul class="editorformTable" v-if="plottingType == 'column'">
                <li class="editorformItem">
                    <div class="editorformItemName">圆柱半径</div>
                    <div class="editorformItemFunc">{{ Number(style.radius).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">离地高度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.height"
                            @input="change('height', style.height)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="0"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">立体高度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.diffHeight"
                            @input="change('diffHeight', style.diffHeight)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="0"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">是否填充</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.fill" @change="change('fill', style.fill)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <fillmaterial :graphic="props.graphic" type="4"></fillmaterial>
                <border :graphic="props.graphic"></border>
            </ul>
            <!-- 椭圆柱 -->
            <ul class="editorformTable" v-if="plottingType == 'ellipticCylinder'">
                <li class="editorformItem">
                    <div class="editorformItemName">短半径</div>
                    <div class="editorformItemFunc">{{ Number(style.semiMinorAxis).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">长半径</div>
                    <div class="editorformItemFunc">{{ Number(style.semiMajorAxis).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">旋转角度</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.rotationDegree"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                            @input="change('rotationDegree', style.rotationDegree)"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">离地高度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.height"
                            @input="change('height', style.height)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="0"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">立体高度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.diffHeight"
                            @input="change('diffHeight', style.diffHeight)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="0"
                        />
                    </div>
                </li>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">是否填充</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.fill" @change="change('fill', style.fill)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <fillmaterial :graphic="props.graphic" type="4"></fillmaterial>
                <border :graphic="props.graphic"></border>
                <li class="editorformItem" v-if="!style.clampToGround">
                    <div class="editorformItemName">边线数量</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.numberOfVerticalLines"
                            @input="change('numberOfVerticalLines', style.numberOfVerticalLines)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="0"
                        />
                    </div>
                </li>
            </ul>
            <!-- 圆锥 -->
            <ul class="editorformTable" v-if="plottingType == 'cylinder'">
                <li class="editorformItem">
                    <div class="editorformItemName">顶部半径</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.topRadius"
                            @input="change('topRadius', style.topRadius)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="0"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">底部半径</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.bottomRadius"
                            @input="change('bottomRadius', style.bottomRadius)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="3"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">锥体高度</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.length"
                            @input="change('length', style.length)"
                            class="editorforminput"
                            :step="1"
                            conliols-position="right"
                            :min="3"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">方向角</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.heading"
                            @input="change('heading', style.heading)"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">仰俯角</div>
                    <div class="editorformItemFunc">
                        <el-slider v-model="style.pitch" @input="change('pitch', style.pitch)" :min="0" :max="360" :step="1" class="editorformItemslider" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">翻滚角</div>
                    <div class="editorformItemFunc">
                        <el-slider v-model="style.roll" @input="change('roll', style.roll)" :min="0" :max="360" :step="1" class="editorformItemslider" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否填充</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.fill" @change="change('fill', style.fill)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <fillmaterial :graphic="props.graphic" type="4"></fillmaterial>
                <border :graphic="props.graphic"></border>
            </ul>
            <!-- 球及椭球----雷达及半球 -->
            <ul class="editorformTable" v-if="plottingType == 'ellipsoid' || plottingType == 'radar'">
                <li class="editorformItem">
                    <div class="editorformItemName">X半径</div>
                    <div class="editorformItemFunc">{{ Number(style.radii_x).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">Y半径</div>
                    <div class="editorformItemFunc">{{ Number(style.radii_y).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">Z半径</div>
                    <div class="editorformItemFunc">{{ Number(style.radii_z).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">内部X半径</div>
                    <div class="editorformItemFunc">{{ Number(style.innerRadii_x).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">内部Y半径</div>
                    <div class="editorformItemFunc">{{ Number(style.innerRadii_y).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">内部Z半径</div>
                    <div class="editorformItemFunc">{{ Number(style.innerRadii_z).toFixed(2) }} 米</div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">最小时钟角</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.minimumClockDegree"
                            @input="change('minimumClockDegree', style.minimumClockDegree)"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">最大时钟角</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.maximumClockDegree"
                            @input="change('maximumClockDegree', style.maximumClockDegree)"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">最小锥角</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.minimumConeDegree"
                            @input="change('minimumConeDegree', style.minimumConeDegree)"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">最大锥角</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.maximumConeDegree"
                            @input="change('maximumConeDegree', style.maximumConeDegree)"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">方向角</div>
                    <div class="editorformItemFunc">
                        <el-slider
                            v-model="style.heading"
                            @input="change('heading', style.heading)"
                            :min="0"
                            :max="360"
                            :step="1"
                            class="editorformItemslider"
                        />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">仰俯角</div>
                    <div class="editorformItemFunc">
                        <el-slider v-model="style.pitch" @input="change('pitch', style.pitch)" :min="0" :max="360" :step="1" class="editorformItemslider" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">翻滚角</div>
                    <div class="editorformItemFunc">
                        <el-slider v-model="style.roll" @input="change('roll', style.roll)" :min="0" :max="360" :step="1" class="editorformItemslider" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否填充</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.fill" @change="change('fill', style.fill)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <fillmaterial :graphic="props.graphic" type="4"></fillmaterial>
                <border :graphic="props.graphic"></border>
                <li class="editorformItem">
                    <div class="editorformItemName">边线数量</div>
                    <div class="editorformItemFunc">
                        <el-input-number
                            v-model="style.stackPartitions"
                            class="editorforminput"
                            :step="1"
                            controls-position="right"
                            :min="2"
                            @input="change('stackPartitions', style.stackPartitions)"
                        />
                    </div>
                </li>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import fillmaterial from "../fillmaterial/fillmaterial.vue";
import border from "../fillmaterial/border.vue";
import * as lodash from "lodash";
// import global from "@/utils/global.data.params";
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {} as any,
    texture: false,
    id: "",
});
let layer: any = reactive({});
layer = computed(() => {
    return props.graphic;
});
const style: any = reactive(layer.value.style);
const plottingType: any = ref(layer.value.options.plottingType);
let pageTitle: any = ref("");
const change = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "dimensions_x":
                props.graphic.setStyle({ dimensions_x: val });
                break;
            case "dimensions_y":
                props.graphic.setStyle({ dimensions_y: val });
                break;
            case "dimensions_z":
                props.graphic.setStyle({ dimensions_z: val });
                break;
            case "heading":
                props.graphic.setStyle({ heading: val });
                break;
            case "pitch":
                props.graphic.setStyle({ pitch: val });
                break;
            case "roll":
                props.graphic.setStyle({ roll: val });
                break;
            case "fill":
                props.graphic.setStyle({ fill: val });
                // 设置填充类型样式
                initChangeEaterialOptions(style.materialType);
                break;
            case "border":
                props.graphic.setStyle({ border: val });
                break;
            case "height":
                props.graphic.setStyle({ height: val });
                break;
            case "diffHeight":
                props.graphic.setStyle({ diffHeight: val });
                break;
            case "rotationDegree":
                props.graphic.setStyle({ rotationDegree: val });
                break;
            case "numberOfVerticalLines":
                props.graphic.setStyle({ numberOfVerticalLines: val });
                break;
            case "topRadius":
                props.graphic.setStyle({ topRadius: val });
                break;
            case "bottomRadius":
                props.graphic.setStyle({ bottomRadius: val });
                break;
            case "length":
                props.graphic.setStyle({ length: val });
                break;
            case "minimumClockDegree":
                props.graphic.setStyle({ minimumClockDegree: val });
                break;
            case "maximumClockDegree":
                props.graphic.setStyle({ maximumClockDegree: val });
                break;
            case "minimumConeDegree":
                props.graphic.setStyle({ minimumConeDegree: val });
                break;
            case "maximumConeDegree":
                props.graphic.setStyle({ maximumConeDegree: val });
                break;
            case "stackPartitions":
                props.graphic.setStyle({ stackPartitions: val });
                props.graphic.setStyle({ slicePartitions: val });
                break;
            default:
                props.graphic.setStyle(style);
        }
    }, 100);
};
const initChangeEaterialOptions = (type: string) => {
    let textureStyle = lodash.cloneDeep(fillTypeStyle[type]);
    style.materialOptions = textureStyle;
    Object.keys(textureStyle).forEach((s: string) => {
        setTimeout(() => {
            switch (s) {
                case "color":
                    props.graphic.setStyle({ materialOptions: { color: textureStyle.color } });
                    break;
                case "gapColor":
                    props.graphic.setStyle({ materialOptions: { gapColor: textureStyle.gapColor } });
                    break;
                case "dashLength":
                    props.graphic.setStyle({ materialOptions: { dashLength: textureStyle.dashLength } });
                    break;
                case "outlineColor":
                    props.graphic.setStyle({ materialOptions: { outlineColor: textureStyle.outlineColor } });
                    break;
                case "outlineWidth":
                    props.graphic.setStyle({ materialOptions: { outlineWidth: textureStyle.outlineWidth } });
                    break;
                case "bgColor":
                    props.graphic.setStyle({ materialOptions: { bgColor: textureStyle.bgColor } });
                    break;
                case "speed":
                    props.graphic.setStyle({ materialOptions: { speed: textureStyle.speed } });
                    break;
                case "bidirectional":
                    props.graphic.setStyle({ materialOptions: { bidirectional: textureStyle.bidirectional } });
                    break;
                case "cellAlpha":
                    props.graphic.setStyle({ materialOptions: { cellAlpha: textureStyle.cellAlpha } });
                    break;
                case "lineCount":
                    props.graphic.setStyle({ materialOptions: { lineCount: textureStyle.lineCount } });
                    break;
                case "lineThickness":
                    props.graphic.setStyle({ materialOptions: { lineThickness: textureStyle.lineThickness } });
                    break;
                case "count":
                    props.graphic.setStyle({ materialOptions: { count: textureStyle.count } });
                    break;
                case "gradient":
                    props.graphic.setStyle({ materialOptions: { gradient: textureStyle.gradient } });
                    break;
                case "evenColor":
                    props.graphic.setStyle({ materialOptions: { evenColor: textureStyle.evenColor } });
                    break;
                case "oddColor":
                    props.graphic.setStyle({ materialOptions: { oddColor: textureStyle.oddColor } });
                    break;
                case "repeat":
                    props.graphic.setStyle({ materialOptions: { repeat: textureStyle.repeat } });
                    break;
                default:
                    props.graphic.setStyle({ materialOptions: textureStyle });
            }
        }, 100);
    });
};
switch (plottingType.value) {
    case "box":
        pageTitle.value = "立体的信息";
        break;
    case "column":
        pageTitle.value = "圆柱的信息";
        if (!style.height) {
            style.height = 0;
        }
        if (!style.diffHeight) {
            style.diffHeight = 0;
        }
        break;
    case "ellipticCylinder":
        pageTitle.value = "椭圆柱的信息";
        if (style.clampToGround) {
            style.diffHeight = 0;
        }
        break;
    case "cylinder":
        pageTitle.value = "圆锥的信息";
        break;
    case "ellipsoid":
        pageTitle.value = "球及椭球的信息";
        break;
    case "radar":
        pageTitle.value = "雷达及半球的信息";
        break;
    default:
        console.log(plottingType);
}
/**
 * 填充类型样式
 */
const fillTypeStyle: any = reactive({
    // 实线 纯色
    Color: {
        color: "#ffff00", // 颜色
    },
    // 虚线
    PolylineDash: {
        color: "#ffff00", // 颜色
        gapColor: "rgba(1,1,1,0)", // 虚线间隔颜色，默认为透明
        dashLength: 16, // 虚线间隔长度，以像素为单位
    },
    // 衬色线
    PolylineOutline: {
        color: "#ffff00", // 颜色
        outlineColor: "#ffffff", // 衬色颜色
        outlineWidth: 1, // 衬色宽度，以像素为单位
    },
    // 箭头
    PolylineArrow: {
        color: "#ffff00", // 颜色
    },
    // OD线
    ODLine: {
        color: "#ffff00", // 颜色
        bgColor: "rgba(0,0,0,7)", // 线的背景颜色
        speed: 20, // 速度，值越大越快
        bidirectional: 0, // 运行形式,可选值：0 正向运动 1 反向运动 2 双向运动
    },
    // 网格
    Grid: {
        color: "#F0F000",
        cellAlpha: 0.1,
        lineCount: 10,
        lineThickness: 1,
    },
    //  放大扩散线
    ScanLine: {
        color: "#F0F000",
        speed: 10, // 速度
    },
    // 波纹扩散
    CircleWave: {
        color: "#F0F000",
        speed: 10, // 速度
        count: 2, // 圆圈个数
        gradient: 0.1, // 透明度的幂方（0-1）,0表示无虚化效果，1表示虚化成均匀渐变
    },
    // 棋盘
    Checkerboard: {
        evenColor: "#F0F000", // 主色
        oddColor: "#F0F000", // 衬色，棋盘中另外一个颜色
        repeat: 10, // 数量，在每个方向重复的次数
    },
});
</script>
